import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';


import ImageLoader from '../../styles/ImageLoader'

import 'fabric';

import $ from 'zepto';

import { Icon, message, Button, Modal } from 'antd';

import { PageEventType } from '../../utils/PageEventType'

import './index.scss'

import WinHelper from '@src/utils/WinHelper'
import Item from 'antd/lib/list/Item';

import Service from '../../service'


@inject('showStore')
@inject('baseStore')
@observer
class ShowPageBT extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			show_free_dialog: false, //自由临摹层
			tenCmNeedZoom: 1,
			visible: true,
			side_show: true,
			moveCanvas: false,
			canvas_orign: {
				width: 1210,
				height: 610
			},
			show_img: false,
			show_img_url: '',
			show_video: false,
			show_video_url: '',
			bgImgList: [{
				Name: '米字格',
				Icon: 'mi_icon',
				ImgUrl: this.props.baseStore.appPreUrl + 'pic/canvas_bg/米_1200x600.png',
				Width: 1200,
				Height: 600
			}, {
				Name: '田字格',
				Icon: 'tian_icon',
				ImgUrl: this.props.baseStore.appPreUrl + 'pic/canvas_bg/田_1200x600.png',
				Width: 1200,
				Height: 600
			}],
			bgImgActivedIndex: 0,
			canvasMyMod: 0, // 左侧进入模式   0.展示模式  1.单点击编辑  2.拖放
			curRightActivedItem: null,  //右侧当前激活  用于单击编辑框

			freeBgUrl: this.props.baseStore.appPreUrl + 'pic/canvas_bg/米_1200x600.png',
			freeActiveItem: null,
			freeActiveItemMap: {

			},
			video_type: 0,// 0 保利  1 普通视频
			show_type: 0, // 0 观看模式 1 临摹模式
			rightList: [],
			currentWordItem: null,
			eachBeitieCoordMap: {}, //存在坐标
			activeWordList: [],
			activeCharType: 0,
			night: false,//夜间

			each_w: 378,
			each_w_mm: 100, //100毫米
			show_profile: false,
			show_shiwen: false,

			hasDetail: false,
			showDetail: {
				"profile": {
					"name": "妙严寺记",
					"one": "赵孟頫（1254~1322），元代书画家，诗人，字子昂，号松雪道人，湖州（今浙江湖州市）人。本为宋朝宗室，宋亡后家居自学。后来元世祖忽必烈派人到江南搜访遗贤，被荐举入朝，官至翰林学士承旨。死后追封魏国公，谥文敏。著作有《松雪斋集》等。",
					"two": "此书结字方正，左右、上下之间的呼应紧密，字形大小因其自然而由之，布白在匀称之中却又能够表现虚实之间的和谐相处。 [7]  有些字分别添加、减省笔画，或者变形书写。添加笔画的有“鸿、建、象、氏、民、旧、陟、土”等字。如“旧”字应当是王羲之、王献之该字写法的杂糅与合成，字形取势则模仿了李邕的写法，即将字底“臼”字作“旧”形，藏在右下角落里。减省笔画的有“摹、念、矗、曾、飙、层、度、远、罗、宪、严”等字，有些是合理运用异体字，有些则为其独创。笔画变位或变形书写的有“悉、旧、几、受、化”等字，大多是唐楷已有之。"
				},
				"page": [
					"大唐西京千福寺多宝佛, 塔感应碑文, 南阳岑勋共 朝试郎,判尚书武部员外郎琅, 邪颜真乡书 朝散大",
					" 大文, 塔感应碑文, 南阳岑勋共 朝试郎,    琅, 邪颜真乡书 朝散大"
				]
			},
			maskLock: false,
			activeRightListIndex: 0

		};

		this._canvas = null;
		this.container = null;

	}




	componentDidMount() {

		var that = this;
		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.title = "碑贴赏习";

		var directoryId = this.props.match.params.directoryId || '';


		var data = {
			type: "page_change",
			content: `/showBeiTie/${directoryId}`
		}

		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);
		this.props.baseStore.socketData.currentReactView = this;





		Service.GetBeitieListById(directoryId).then(data => {
			console.log(data, "========directoryId========");
			if (data.length > 0) {
				this.setState({
					rightList: data,
					currentWordItem: data[0]
				})
			}

		});


		$('.show_bt_conainer').css({
			transform: 'scale(1)'
		})
		$('.show_bt_conainer').on('mousewheel', function (event) {

			// deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。
			// deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
			// deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

			var real_y = event.wheelDeltaY;
			if (real_y > 0) {
				that.zoom(0.02)
			} else {
				that.zoom(-0.02)
			}


		});

		this.bindPadKey();
	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}


	bindPadKey = () => {
		var that = this;

		//放大
		window.listenerNativeCode('24', function (code) {
			that.zoomToForPhysicalButton(1);
		})

		//缩小
		window.listenerNativeCode('25', function (code) {
			that.zoomToForPhysicalButton(-1);
		})
	}


	zoom = (step) => {

		var data = {
			type: "do_action",
			content: {
				action: 'zoom',
				param: [step]
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		var curImgScale = parseFloat($('.show_bt_conainer').css('transform').split('(')[1].split(')')[0]);


		// if (curImgScale + step < 0.5) {
		// 	message.info('达最小缩放值!');
		// 	return false;
		// }

		// if (curImgScale + step > 1.3) {
		// 	message.info('达最大缩放值!');
		// 	return false;
		// }

		curImgScale = curImgScale + step;

		$('.show_bt_conainer').css({
			transform: "scale(" + curImgScale + ")"
		})

	}



	//左侧显示与隐藏切换
	handleToggleSideClick = () => {

		var data = {
			type: "do_action",
			content: {
				action: 'handleToggleSideClick',
				param: []
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		var to = !this.state.side_show;

		this.setState({
			side_show: to,
			maskLock: false
		})
	}


	changeShowType = (to) => {

		var data = {
			type: "do_action",
			content: {
				action: 'changeShowType',
				param: [to]
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		if (to == 0) {
			this.renderCanvas();
		}
		this.setState({
			show_type: to
		})

		if (to == 1) {
			this.setState({
				activeWordList: []
			});
			this.renderCanvas();
		}


	}

	clearActiveWordList = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'clearActiveWordList',
				param: []
			}
		});

		this.setState({ activeWordList: [] })
	}

	handlerConfirm = () => {

		var data = {
			type: "do_action",
			content: {
				action: 'handlerConfirm',
				param: []
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		if (this.state.activeWordList.length == 0) {
			message.warning('您先选择需要临摹的字');
			return;
		}

		var my_px = WinHelper.mmToPx(100);
		console.log(my_px, "=========my_px==========");

		this.setState({
			show_type: 3
		});

		// this.setState({
		// 	side_show: !this.state.side_show
		// })
	}

	singleContainClick = (item, index) => {


		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'singleContainClick',
				param: [item, index]
			}
		});



		var that = this;

		console.log(this.state.show_type, "=======singleContainClick.show_type============");

		that.setState({
			currentWordItem: item,
			activeRightListIndex: index || 0
		}, function () {
			if (that.state.show_type == 1) {
				that.setState({
					activeWordList: []
				});
				that.renderCanvas();
			}
		});




	}


	renderCanvas = () => {
		var that = this;
		if (this._canvas == null) {
			this._canvas = new fabric.Canvas('canvas'); //声明画布
			this._canvas.selection = false;
			this._canvas.skipTargetFind = true;
			this._canvas.selectable = false;
		} else {
			this._canvas.clear();
		}
		// var url = "http://223.68.159.69:1001/Images/beitie/寒食帖.png";
		// url = this.props.baseStore.appPreUrl+"pic/beitei.png";
		// url = "http://223.68.159.69:1001/Images/beitie/Dazi/1.jpg";
		// // url=this.props.baseStore.appPreUrl+"pic/beitei.png";

		var url = this.props.baseStore.GetFinalImageUrl(that.state.currentWordItem.ImageURL);

		window["sx"] = 1;
		window["sy"] = 1;

		// var arr = that.state.currentWordItem;
		// console.log(arr, "=======currentWordItem=============");

		that.canvas_container_dom = document.getElementById("aaa");

		fabric.Image.fromURL(url, function (oImg) {

			oImg.width = oImg._element.width;
			oImg.height = oImg._element.height;

			that._canvas.setWidth(oImg.width * 0.7);
			that._canvas.setHeight(oImg.height * 0.7);

			oImg.preserveObjectStacking = true;

			that.canvas_container_dom.style.width = oImg.width * 0.7 + "px";
			that.canvas_container_dom.style.height = oImg.height * 0.7 + "px";

			oImg.preserveObjectStacking = true;

			oImg.scaleX = 0.7;
			oImg.scaleY = 0.7;

			oImg.crossOrigin = 'anonymous';

			oImg.selectable = false;

			that._canvas.add(oImg);

			var directoryId = that.state.currentWordItem.DirectoryID;

			//已经拉过数据
			if (that.state.eachBeitieCoordMap[directoryId] != undefined) {
				var arr = that.state.eachBeitieCoordMap[directoryId];
				that.drawing(arr);
			} else {
				Service.GetBeitieCoordsListById(directoryId).then(data => {
					console.log(data, "========directoryId========");
					if (data.length > 0) {

						for (var k = 0; k < data.length; k++) {
							// data[k]['WordList'] = [
							// 	{ "DirectoryID": "b11f2750-fc83-471c-8304-a37fede6ded3", "DirectoryName": "单字", "ParentGUID": "a24a079d-05b1-41a8-956a-6f73a098b674", "VideoURL": null, "AnimationURL": null, "ImageURL": "Images/wordpic/千-单字.png", "NavURL": null, "ImageName": null, "ImgWidth": "300", "ImgHeight": "300", "ImgClass": null, "CalligrapherId": null, "CalligrapherName": null, "TypefaceId": null, "TypefaceName": null, "Bihua": null, "Bushou": null, "IsSingle": null, "TreeLevel": null, "EnabledMark": 1, "DirectoryType": 1, "AddDate": "2019-07-18T16:45:22.343+08:00", "Adder": "管理员", "UpdateDate": "2019-09-02T11:35:01.963+08:00", "Updater": "管理员", "SortOrder": 1, "IsDefault": null, "Description": null, "DirectoryURL": null, "Navigation": null },
							// 	{ "DirectoryID": "d10959d3-64ba-4988-9dbe-0bddedff08cc", "DirectoryName": "双钩", "ParentGUID": "a24a079d-05b1-41a8-956a-6f73a098b674", "VideoURL": null, "AnimationURL": null, "ImageURL": "Images/wordpic/千-双钩.png", "NavURL": null, "ImageName": null, "ImgWidth": "300", "ImgHeight": "300", "ImgClass": null, "CalligrapherId": null, "CalligrapherName": null, "TypefaceId": null, "TypefaceName": null, "Bihua": null, "Bushou": null, "IsSingle": null, "TreeLevel": null, "EnabledMark": 1, "DirectoryType": 1, "AddDate": "2019-07-18T16:45:42.263+08:00", "Adder": "管理员", "UpdateDate": "2019-09-02T11:35:06.57+08:00", "Updater": "管理员", "SortOrder": 2, "IsDefault": null, "Description": null, "DirectoryURL": null, "Navigation": null },
							// 	{ "DirectoryID": "02d85e7f-1668-4ee4-adfc-dfabafd6ffeb", "DirectoryName": "单钩", "ParentGUID": "a24a079d-05b1-41a8-956a-6f73a098b674", "VideoURL": null, "AnimationURL": null, "ImageURL": "Images/wordpic/千-单钩.png", "NavURL": null, "ImageName": null, "ImgWidth": "300", "ImgHeight": "300", "ImgClass": null, "CalligrapherId": null, "CalligrapherName": null, "TypefaceId": null, "TypefaceName": null, "Bihua": null, "Bushou": null, "IsSingle": null, "TreeLevel": null, "EnabledMark": 1, "DirectoryType": 1, "AddDate": "2019-07-18T16:46:07.47+08:00", "Adder": "管理员", "UpdateDate": "2019-09-02T11:35:11.473+08:00", "Updater": "管理员", "SortOrder": 3, "IsDefault": null, "Description": null, "DirectoryURL": null, "Navigation": null },
							// 	{ "DirectoryID": "f49d2292-9c16-48d9-b950-016270760420", "DirectoryName": "字形", "ParentGUID": "a24a079d-05b1-41a8-956a-6f73a098b674", "VideoURL": null, "AnimationURL": null, "ImageURL": "Images/wordpic/千-字形.png", "NavURL": null, "ImageName": null, "ImgWidth": "300", "ImgHeight": "300", "ImgClass": null, "CalligrapherId": null, "CalligrapherName": null, "TypefaceId": null, "TypefaceName": null, "Bihua": null, "Bushou": null, "IsSingle": null, "TreeLevel": null, "EnabledMark": 1, "DirectoryType": 1, "AddDate": "2019-07-18T16:46:15.457+08:00", "Adder": "管理员", "UpdateDate": "2019-09-02T11:35:16.31+08:00", "Updater": "管理员", "SortOrder": 4, "IsDefault": null, "Description": null, "DirectoryURL": null, "Navigation": null }];
							that.state.eachBeitieCoordMap[data[k].CoordsId] = data[k];
						}

						that.setState({
							eachBeitieCoordMap: that.state.eachBeitieCoordMap,
							activeWordList: []
						});
						that.drawing(data);
					}

				})
			}

		});

		that._canvas.on("selection:created", function (e) {
			console.log(e.target, "=========e.target==========");
			console.log(e.target.index, "=========e.target.index==========");


			var coordId = e.target.index;
			that.selectionCreatedDo(coordId);






		});

		that._canvas.on("mouse:down", function (options) {
			that.mouseDownDo();
		});
	}


	mouseDownDo = () => {
		var that = this;
		that._canvas.selection = true;
		that._canvas.skipTargetFind = false;
		that._canvas.selectable = true;

		var data = {
			type: "do_action",
			content: {
				action: 'mouseDownDo',
				param: []
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);
	}


	selectionCreatedDo = (coordId) => {

		var data = {
			type: "do_action",
			content: {
				action: 'selectionCreatedDo',
				param: [coordId]
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		var that = this;

		that._canvas.selection = false;
		that._canvas.skipTargetFind = true;
		that._canvas.selectable = false;
		that._canvas.discardActiveObject().renderAll();


		var wordList = that.state.eachBeitieCoordMap[coordId]['WordList'];

		console.log(wordList, "==========selection========");


		if (wordList != undefined) {

			var activeWordListNew = that.state.activeWordList;
			activeWordListNew.push(wordList);

			that.setState({
				activeWordList: activeWordListNew
			});
			return;
		}



		var wordId = that.state.eachBeitieCoordMap[coordId].WordId;
		Service.GetSingleWordListById(wordId).then(data => {
			console.log(data, "========directoryId========");
			if (data.length > 0) {

				that.state.eachBeitieCoordMap[coordId]['WordList'] = data;

				var activeWordListNew = that.state.activeWordList;
				activeWordListNew.push(data);

				that.setState({
					eachBeitieCoordMap: that.state.eachBeitieCoordMap,
					activeWordList: activeWordListNew
				});



			}

		})
	}



	drawing = (arr) => {

		var that = this;

		window.zoom = window.zoom ? window.zoom : 1;
		var drawWidth = 2; //笔触宽度
		var color = "#C01919"; //画笔颜色

		for (var i = 0; i < arr.length; i++) {

			var item = arr[i];

			var mouseFrom = {
				x: arr[i].FromX,
				y: arr[i].FromY
			}

			var mouseTo = {
				x: arr[i].ToX,
				y: arr[i].ToY
			}

			var path =
				"M " +
				mouseFrom.x +
				" " +
				mouseFrom.y +
				" L " +
				mouseTo.x +
				" " +
				mouseFrom.y +
				" L " +
				mouseTo.x +
				" " +
				mouseTo.y +
				" L " +
				mouseFrom.x +
				" " +
				mouseTo.y +
				" L " +
				mouseFrom.x +
				" " +
				mouseFrom.y +
				" z";
			var left = mouseFrom.x,
				top = mouseFrom.y;
			console.log(path, "========path=========");
			var canvasObject = new fabric.Path(path, {
				left: left,
				top: top,
				stroke: color,
				strokeWidth: drawWidth,
				fill: "rgba(255, 255, 255, 0)"
			});
			canvasObject.index = item.CoordsId;
			that._canvas.add(canvasObject);

		}




	}

	toggleNight = () => {

		var data = {
			type: "do_action",
			content: {
				action: 'toggleNight',
				param: []
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		this.setState({
			night: !this.state.night
		});
	}

	zoomToForPhysicalButton = (num) => {

		var arr = [50, 75, 90, 100, 120];
		var curIndex = arr.indexOf(this.state.each_w_mm);

		if (num > 0) {
			curIndex = curIndex + 1;
			curIndex = curIndex > 5 ? 5 : curIndex;
			//放大
		} else {
			curIndex = curIndex - 1;
			curIndex = curIndex < 0 ? 0 : curIndex;
		}


		this.zoomToMM(arr[curIndex])
	}

	zoomToMM = (mm) => {

		var data = {
			type: "do_action",
			content: {
				action: 'zoomToMM',
				param: [mm]
			}
		}

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		// 计算出如果调成安世高10cm的绽放比例
		var my_px = WinHelper.mmToPx(mm);
		my_px = Math.round(my_px);
		console.log(my_px, "=======my_px=======");
		this.setState({
			each_w: my_px,
			each_w_mm: mm
		})
	}

	closeProfile = () => {


		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'closeProfile',
				param: []
			}
		});


		this.setState({
			show_profile: false
		})
	}

	showProfile = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'showProfile',
				param: []
			}
		});

		this.setState({
			show_profile: true
		})
	}

	closeShiWen = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'closeShiWen',
				param: []
			}
		});

		this.setState({
			show_shiwen: false
		})
	}

	showShiWen = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'showShiWen',
				param: []
			}
		});


		this.setState({
			show_shiwen: true
		})
	}


	lock = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'lock',
				param: []
			}
		});

		this.setState({
			maskLock: !this.state.maskLock,
			side_show: false
		})
	}


	changeActiveCharType = (index) => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'changeActiveCharType',
				param: [index]
			}
		});

		this.setState({
			activeCharType: index
		})
	}

	render() {

		var ShowPage_Main = "ShowPage_Main ";

		if (this.state.night) {
			ShowPage_Main += "night";
		}

		let sideClassName = "ShowPage_Side ";

		if (this.state.side_show) {
			sideClassName += " toggle_show";
		}

		if (!this.state.side_show) {
			sideClassName += " toggle_hide";
		}

		if (this.state.show_type == 0) {
			sideClassName += " type_2";
		}

		if (this.state.show_type == 1) {
			sideClassName += " type_1";
		}

		if (this.state.show_type == 3) {
			sideClassName += " type_positive_2"; //只显示第一列
		}


		var sideMainCls = "ShowPage_Side_Main"
		if (this.state.rightList.length > 3) {
			sideMainCls += " has_scroll_bar";
		}


		var freeBgUrl = this.state.freeBgUrl;

		const styles = {
			freeBg: {
				backgroundImage: `url(${freeBgUrl})`,
				// width: this.state.each_w * 4,
				// height: this.state.each_w*2
			},
			free_large: {
				backgroundImage: `url(${freeBgUrl})`,
				width: this.state.each_w * 4,
				height: this.state.each_w * 2
			},
			free_img_each: {
				width: this.state.each_w,
				height: this.state.each_w
			}
		}

		var url = this.state.currentWordItem != null ? this.props.baseStore.GetFinalImageUrl(this.state.currentWordItem['ImageURL'] || '') : "";


		return (

			<div className="ShowPageBT page_container  fadeInDown fast" >


				{
					this.state.show_type == 3 ? <div className="mask">
						<div className="free_right_03" style={styles.free_large} >
							{
								this.state.activeWordList.map((list, index) => {
									var item = list[this.state.activeCharType];
									return <img src="" style={styles.free_img_each} key={index} className="free_each" src={this.props.baseStore.picPreUrl + item.ImageURL} />
								})
							}
						</div>
					</div> : null
				}



				<div className={sideClassName} ref="_side" >


					<div className={sideMainCls} ref="_tool" >
						{
							this.state.rightList.map((item, index) => {
								var single_container_cls = "single_container ";
								console.log(index, "index");
								if (this.state.activeRightListIndex == index) {
									single_container_cls = single_container_cls + ' active';
								}

								return (
									<div className={single_container_cls} key={index} onClick={() => this.singleContainClick(item, index)}>
										<div className="single_img_container">
											<img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />
										</div>

									</div>
								)
							})
						}


					</div>

					<div className="ShowPage_Tool" ref="_tool" >
						<div className="canvas_toggle_bg" onClick={this.toggleNight}>
							白夜切换
						</div>
						<div className="canvas_toggle_bg" onClick={() => { this.changeShowType(0) }}>
							初始显示
						</div>
						<div className="canvas_toggle_bg mt_1" onClick={this.showProfile}>
							简介
						</div>
						<div className="canvas_toggle_bg" onClick={this.showShiWen}>
							释文
						</div>
						{/* <div className="canvas_toggle_bg" onClick={() => { this.changeShowType(3) }}>
							原贴临摹
						</div> */}


						<div className="canvas_toggle_bg" onClick={() => { this.changeShowType(1) }}>
							单字临摹
						</div>

						{
							this.state.show_type ? <React.Fragment>



								<div className={this.state.each_w_mm == 120 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(120) }}>
									12cm
								</div>
								<div className={this.state.each_w_mm == 100 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(100) }}>
									10cm
								</div>
								<div className={this.state.each_w_mm == 90 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(90) }}>
									9cm
								</div>
								<div className={this.state.each_w_mm == 75 ? "canvas_toggle_bg active" : "canvas_toggle_bg"} onClick={() => { this.zoomToMM(75) }}>
									7.5cm
								</div>
								<div className={this.state.each_w_mm == 50 ? "canvas_toggle_bg active" : "canvas_toggle_bg"} onClick={() => { this.zoomToMM(50) }}>
									5cm
								</div>
							</React.Fragment> : null
						}

						{
							this.state.show_type == 0 ? <div className="canvas_toggle_bg" onClick={() => { this.zoom(0.02) }}>
								放大
							</div> : null
						}

						{
							this.state.show_type == 0 ? <div className="canvas_toggle_bg" onClick={() => { this.zoom(-0.02) }}>
								缩小
							</div> : null
						}


						{
							!this.state.maskLock && <div className="canvas_can_drag " onClick={() => this.lock()}>
								锁屏
							</div>
						}

						{
							this.state.maskLock && <div className="canvas_can_drag active" onClick={() => this.lock()}>
								锁屏
							</div>
						}



					</div>

					<div onClick={this.handleToggleSideClick} className="ShowPage_Tool_Min fixed" ref="_tool_min" >
						<Icon type={this.state.side_show ? "arrow-left" : "arrow-right"} />
					</div>



				</div>



				<div className={ShowPage_Main} >


					<div className="center_container">

						{

							<div id="aaa" className={this.state.show_type == 0 ? "show_bt_conainer" : "show_bt_conainer show_small"}>

								<img src={url} alt="" className="show_bt_img" />

								<canvas id="canvas" width='413' height='500' className="show_bt_canvas" ></canvas>

							</div>
						}
						{
							this.state.show_type == 1 ? <div className="center_right">

								<div className="img_type">
									<div onClick={() => { this.changeActiveCharType(0) }} className={this.state.activeCharType == 0 ? "img_type_each active" : "img_type_each"}>描红</div>
									<div onClick={() => { this.changeActiveCharType(1) }} className={this.state.activeCharType == 1 ? "img_type_each active" : "img_type_each"}>双钩</div>
									<div onClick={() => { this.changeActiveCharType(2) }} className={this.state.activeCharType == 2 ? "img_type_each active" : "img_type_each"}>单钩</div>
									<div onClick={() => { this.changeActiveCharType(3) }} className={this.state.activeCharType == 3 ? "img_type_each active" : "img_type_each"}>轮郭</div>
								</div>
								<div className="free_right_03" style={styles.freeBg} >

									{
										this.state.activeWordList.map((list, index) => {
											var item = list[this.state.activeCharType];
											return <img src="" key={index} className="free_each" src={this.props.baseStore.picPreUrl + item.ImageURL} />
										})
									}

								</div>
								<div className="center_right_bottom_line">
									<Button type="default" size="large" onClick={this.clearActiveWordList}>清空</Button>
									<Button type="default" size="large" onClick={() => this.changeShowType(0)}>返回</Button>
									<Button type="primary" size="large" onClick={this.handlerConfirm}>确定</Button>
								</div>
							</div> : null

						}


					</div>





				</div>


				{
					// this.state.show_img && (<div className="wrap_for_show_create_img" onClick={this.hideShowImg} >
					// 	<img download className="img_for_show_create_img" src={this.state.show_img_url} alt="" />
					// 	<Button />
					// </div>)


					<Modal
						title={<div className="center_title">{this.state.showDetail.profile.name}  简介</div>}
						centered={true}
						width={1020}
						height={600}
						visible={this.state.show_profile}
						footer={null}
						onCancel={this.closeProfile}
						wrapClassName=""
					>

						<div className="show_profile_container">

							<div className="one_title">名家介绍</div>
							<div className="one">{this.state.showDetail.profile.one}</div>

							<div className="two_title">作品介绍</div>
							<div className="one">{this.state.showDetail.profile.one}</div>
						</div>

					</Modal>
				}

				{
					<Modal
						title={<div className="center_title">{this.state.showDetail.profile.name}  释文</div>}
						centered={true}
						visible={this.state.show_shiwen}
						footer={null}
						onCancel={this.closeShiWen}
						wrapClassName="no_padding_model"
					>

						<div className="show_shiweb_container">

							{
								this.state.showDetail.page[0].split(',').map((item, index) => {


									console.log(item, "==========item==============");

									return <div className="shiweb_line">

										{
											item.split("").map((word, i) => {
												console.log(item, "==========word==============");
												return <div className="shiweb_line_each">{word}</div>
											})
										}

									</div>
								})
							}





						</div>

					</Modal>
				}

				{
					this.state.maskLock && <div className="lockMask">
						<div className="lock_text">锁屏中</div>
					</div>
				}


			</div >
		);


	}
}

export default ShowPageBT;